<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/css/style-app.css" />
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/bootstrap/easyui.css">
<script src="../static/jquery/jquery-1.12.4.js"></script>
<script src="../static/easyui/jquery.easyui.min.js"></script>
<title>播放</title>
</head>
<body>
	<div class="top-part">
		<div class="header">
			<div class="return">
				<a href="javascript:history.go(-1);"></a>
			</div>
			<div class="header-title">摄像头列表</div>
		</div>

	</div>
	<video id="video" x5-playsinline="" playsinline="" webkit-playsinline="" width="375" height="200" controls="controls"></video>
</body>
<script th:inline="javascript">
	var camera =[[${camera}]];
	var cameratime =[[${cameraTime}]];
	var url = camera.url;
	var timeDisplay = 0;
	var dailytime = camera.dailytime;
	var eachtime = cameratime.eachtime;
	
	var video = document.getElementById('video');
	video.src = url;
	
	//使用事件监听方式捕捉实时时间
	video.addEventListener("timeupdate",function(){
		//用秒数来显示当前播放进度
		timeDisplay = Math.floor(video.currentTime);
		if(timeDisplay == eachtime*61){
			alert('播放时长已到达');
			video.pause();
		}
	},false);
	
    /* 定时器  间隔1秒检测是否长时间未操作页面  */
    setInterval(function() {
    	savePro(60000);
	}, 1000*60);  
	    
	function savePro(timeDisplay) {
	    camera.dailytime = Number(dailytime) + Number(timeDisplay);
		$.ajax({
			type : 'POST',
			url : "../CameraSave.do",
			data : JSON.stringify(camera),
			contentType : "application/json",
			success : function(data) {
				timeDisplay=0;
			},
			dataType : "json"
		});
	}

</script>
</html>
